<script lang="ts" setup>
import type { ClassifyType } from '@/type/type'
import { type ClassifyLabelVO } from '@/request/api/classify'
import { useTemporaryStore } from '@/stores/temporary'

const { type, search } = defineProps({
  type: {
    type: Number as unknown as PropType<ClassifyType>,
    required: true
  },
  search: {
    type: Function,
    required: true
  }
})

const temporaryStore = useTemporaryStore()
const classifyLabelsList = ref<ClassifyLabelVO[]>([])

// 初始化查询参数
const initQueryParams = () => {
  return {
    classifyId: -1,
    labelId: -1,
    name: null,
    status: -1
  }
}
const queryParamsForm = ref(initQueryParams())

const setQueryParams = () => {
  const param: Record<string, any> = {}
  /* 只有标签表有 classifyId */
  if (queryParamsForm.value.classifyId !== -1) {
    param['classifyId'] = queryParamsForm.value.classifyId
  }
  if (queryParamsForm.value.labelId !== -1) {
    param['labelId'] = queryParamsForm.value.labelId
  }
  if (queryParamsForm.value.name != null) {
    param['name'] = queryParamsForm.value.name
  }
  if (queryParamsForm.value.status !== -1) {
    param['status'] = queryParamsForm.value.status
  }
  return param
}

// 监听查询参数变化 传递给父组件
const emit = defineEmits(['update'])

onMounted(() => {
  temporaryStore.getClassifyList(type).then((res: ClassifyLabelVO[]) => {
    classifyLabelsList.value = res
  })
})
</script>

<template>
  <el-container class="flex-wrap">
    <el-form-item class="w-52" label="名称" prop="name">
      <el-input
        v-model="queryParamsForm.name"
        maxlength="16"
        placeholder="请输入名称/标题"
        @change="emit('update', setQueryParams())"
      />
    </el-form-item>
    <el-form-item class="w-52" label="类别" prop="classifyId">
      <el-select v-model="queryParamsForm.classifyId">
        <el-option key="-1" :value="-1" label="无" />
        <el-option v-for="i in classifyLabelsList" :key="i.name" :label="i.name" :value="i.id" />
      </el-select>
    </el-form-item>
    <el-form-item class="w-52" label="标签" prop="labelId">
      <el-select v-model="queryParamsForm.labelId">
        <el-option key="-1" :value="-1" label="请先选择类别" />
        <el-option
          v-for="i in temporaryStore.getLabelList(queryParamsForm.classifyId)"
          :key="i.name"
          :label="i.name"
          :value="i.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item class="w-32" label="状态" prop="status">
      <el-select v-model="queryParamsForm.status" @change="emit('update', setQueryParams())">
        <el-option :value="-1" label="无" />
        <el-option :value="1" label="启用" />
        <el-option :value="0" label="停用" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button
        class="!px-2"
        plain
        type="primary"
        @click="
          () => {
            emit('update', setQueryParams())
            search()
          }
        "
      >
        <SvgIcon message="搜索" name="search" />
      </el-button>
      <el-button
        class="!px-2"
        plain
        type="info"
        @click="
          () => {
            queryParamsForm = initQueryParams()
            emit('update', setQueryParams())
            search()
          }
        "
      >
        <SvgIcon message="重置" name="refresh" />
      </el-button>
    </el-form-item>
  </el-container>
</template>

<style lang="scss" scoped></style>
